<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

	</head>
	<body>
		<div class="wrap-container welcome-container">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					<div class="data-show">
						<ul class="clearfix">
							<%--上班打卡--%>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="clockTitle">
											<%--<span class="color-org" style="color: #00a0e9; font-size:20px ">上班打卡</span>--%>

                                        <!-- 按钮触发模态框 -->
                                        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="width:30%;height: 20%;font-size: 14px;line-height: 0;letter-spacing: 0.3em;font-weight: 600;">
                                        去这里
                                        </button>
										<form class="layui-form" action="" style="height:30px">
                                            <!-- 模态框（Modal） -->
                                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                &times;
                                                            </button>

                                                        </div>
                                                        <div url="www.baidu.com">
                                                            <iframe allowtransparency="true" frameborder="0" width="500" height=500" scrolling="no" src="../index/address.jsp"></iframe>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                            </button>
                                                        </div>
                                                    </div><!-- /.modal-content -->
                                                </div><!-- /.modal -->
                                            </div>
										</form>
										</p>
									</div>
								</a>
							</li>
							<%--//天气插件--%>
							<li class="col-sm-12 col-md-8 col-xs-12">
								<iframe allowtransparency="true" frameborder="0" width="387" height="98" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=3&bd=1&k=000000&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=71415&w=387&h=98&align=center"></iframe>
							</li>

						</ul>
					</div>
					<!--图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart" style="height: 376px;">
						</div>
					</div>
					<!--服务器信息-->
					<%--<div class="server-panel panel panel-default">
						<div class="panel-header">服务器信息</div>
						<div class="panel-body clearfix">
							<div class="col-md-2">
								<p class="title">服务器环境</p>
								<span class="info">Apache/2.4.4 (Win32) PHP/5.4.16</span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器IP地址</p>
								<span class="info">127.0.0.1   </span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器域名</p>
								<span class="info">localhost </span>
							</div>
							<div class="col-md-2">
								<p class="title"> PHP版本</p>
								<span class="info">5.4.16</span>
							</div>
							<div class="col-md-2">
								<p class="title">数据库信息</p>
								<span class="info">5.6.12-log </span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器当前时间</p>
								<span class="info">2016-06-22 11:37:35</span>
							</div>
						</div>
					</div>--%>
				</div>
				<div class="welcome-edge col-lg-3">
					<!--最新留言-->
					<div class="panel panel-default comment-panel">
						<div class="panel-header">我的便签</div>
						<div class="panel-body">
							<div class="commentbox">
								<ul class="commentList">
								  <%--<li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src=""></i></a>
								    <div class="comment-main">
								      <header class="comment-header">
								        <div class="comment-meta"><a class="comment-author planTitle" href="#">慕枫</a>
								          <time class="createTime">2014-8-31 15:20</time>
								        </div>
								      </header>
								      <div class="comment-body">
								        <p><a href="#" class="planContent"></a> 系统真不错！！！</p>
								      </div>
								    </div>
								  </li>--%>

								</ul>
							</div>
							<div id="pagesbox" style="text-align: center;padding-top: 5px;">
								
							</div>
						</div>
					</div>
					<!--联系-->
					<div class="panel panel-default contact-panel">
						<div class="panel-header">联系我们</div>
						<div class="panel-body">
							<p>QQ：1465465646</p>
							<p>E-mail:4565564@qq.com</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
		<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/admin/lib/echarts/echarts.js"></script>
		<script src="${pageContext.request.contextPath}/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript"
				src="https://webapi.amap.com/maps?v=1.4.15&key=ec50b8bbb80620ff7561b8610495d647"></script>//使用高德地图api接口
		<script src="https://apip.weatherdt.com/standard/static/js/weather-standard-common.js?v=2.0"></script>//使用天气插件
		<script type="text/javascript">
			//获得用户的id
			var accountId = 1;
			//格式化时间
			var date = new Date();
			var workTime = dateFormat("YY-mm-dd",date);
			var workTimeMore = dateFormat("YY-mm-dd HH:MM:SS",date);


			$(document).ready(function(){
			//获得打卡地点
			var address = null;
			layui.use(['layer','jquery'], function(){
				var layer 	= layui.layer;
				var $=layui.jquery;
				//图表
	/*			var myChart;

				require.config({
				    paths: {
				        echarts: '../../static/admin/lib/echarts'
				    }
				});
				require(
				    [
				        'echarts',
				        'echarts/chart/bar',
				        'echarts/chart/line',
				        'echarts/chart/map'
				    ],
				    function (ec) {
				        //--- 折柱 ---
				        myChart = ec.init(document.getElementById('chart'));
				        myChart.setOption(
				        	{
						     title: {
						        text: "数据统计",
						        textStyle: {
						            color: "rgb(85, 85, 85)",
						            fontSize: 18,
						            fontStyle: "normal",
						            fontWeight: "normal"
						        }
						    },
						    tooltip: {
						        trigger: "axis"
						    },
						    legend: {
						        data: ["会员", "文章", "评论"],
						        selectedMode: false,
						    },
						    toolbox: {
						        show: true,
						        feature: {
						            dataView: {
						                show: false,
						                readOnly: true
						            },
						            magicType: {
						                show: false,
						                type: ["line", "bar", "stack", "tiled"]
						            },
						            restore: {
						                show: true
						            },
						            saveAsImage: {
						                show: true
						            },
						            mark: {
						                show: false
						            }
						        }
						    },
						    calculable: false,
						    xAxis: [
						        {
						            type: "category",
						            boundaryGap: false,
						            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
						        }
						    ],
						    yAxis: [
						        {
						            type: "value"
						        }
						    ],
						     grid: {
						        x2: 30,
						        x: 50
						    },
						    series: [
						        {
						            name: "会员",
						            type: "line",
						            smooth: true,
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: "default"
						                    }
						                }
						            },
						            data: [10, 12, 21, 54, 260, 830, 710]
						        },
						        {
						            name: "文章",
						            type: "line",
						            smooth: true,
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: "default"
						                    }
						                }
						            },
						            data: [30, 182, 434, 791, 390, 30, 10]
						        },
						        {
						            name: "评论",
						            type: "line",
						            smooth: true,
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: "default"
						                    },
						                    color: "rgb(110, 211, 199)"
						                }
						            },
						            data: [1320, 1132, 601, 234, 120, 90, 20]
						        }
						    ]
						}
				        );
					}
				);*/

					//获取当前的位置
					mapObj = new AMap.Map('iCenter');
					mapObj.plugin('AMap.Geolocation', function () {
						geolocation = new AMap.Geolocation({
							enableHighAccuracy: true,//是否使用高精度定位，默认:true
							timeout: 10000,          //超过10秒后停止定位，默认：无穷大
							maximumAge: 0,           //定位结果缓存0毫秒，默认：0
							convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
							showButton: true,        //显示定位按钮，默认：true
							buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
							buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
							showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
							showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
							panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
							zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
						});

						mapObj.addControl(geolocation);
						geolocation.getCurrentPosition();
						AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
						AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息


					});
					//解析定位结果
					function onComplete(data) {

						var district = data.addressComponent.district;
						address = data.formattedAddress;
						console.log(address);
						var lat1 = data.position.getLat();
						var lng1 = data.position.getLng();

						//获得公司的经纬度
						var lat2 = 24.488707;
						var lng2 = 118.175666;
						//计算公司和当前定位的距离
						var radLat1 = lat1 * Math.PI / 180.0;
						var radLat2 = lat2 * Math.PI / 180.0;
						var a = radLat1 - radLat2;
						var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
						var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
								Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
						s = s * 6378.137;// EARTH_RADIUS;
						s = Math.round(s * 10000) / 10000;




						//渲染打卡页面
						function getClockByajax(){
							$.ajax({
								async:true,
								url:"${pageContext.request.contextPath}/Clock/getWorkStatusByid",
								type:"GET",
								data:{accountId:1,
									workTime:workTime
								},
								dataType:"json",
								success:function(result,status,xhr){
									if(result == null){
										if (lat1 != 0 && lng1 != 0) {
											var hours = date.getHours();
											if (s >= 1) {
												<%--<span class="color-org" style="color: #00a0e9; font-size:20px ">上班打卡</span>--%>
												$(".clockTitle").append("<a class='color-org outClock' style=\"color: yellowgreen; font-size:20px  data-address="+address+" \">外勤打卡</a>");

											}else {
												if (hours < 9) {
													$(".clockTitle").append("<a class='color-org workClock' style=\"color: blue; font-size:20px \">上班打卡</a>");

												} else {
													$(".clockTitle").append("<a class='color-org lateClock' style=\"color: red; font-size:20px \">迟到打卡</a>");
												}
											}
										}

									}else {
										$(".clockTitle").append("<a class=\"color-org\" style=\"color: blue; font-size:20px \">已打卡</a>");
									}
								},

								error:function(xhr,status,error){
									alert("异步请求失败!");
								},
							});
						}

						getClockByajax();

						//打卡点击事件
						//外勤打卡
						$(document).on("click",".outClock",function(){

							let workStatus = 3;
							addWorkInfo(address,workStatus,workTimeMore);
							$(".outClock").remove();
							getClockByajax();
						});

						//上班打卡
						$(document).on("click",".workClock",function(){
							let workStatus = 1;
							addWorkInfo(address,workStatus,workTimeMore);
							$(".workClock").remove();
							getClockByajax();
						});

						//迟到打卡
						$(document).on("click",".lateClock",function(){
							let workStatus = 2;
							addWorkInfo(address,workStatus,workTimeMore);
							$(".lateClock").remove();
							getClockByajax();
						});

					}

					// 解析定位错误信息

					function onError(data) {
						console.log('定位失败');
						alert(JSON.stringify(data));
					}


					//渲染便签列表
                    $.ajax({
                        async:true,
                        url:"${pageContext.request.contextPath}/Plan/getPlanInfoById",
                        type:"POST",
                        data:{
                            accountId:accountId,
                            workTime:workTime
                        },
                        dataType:"json",
                        success:function(result,status,xhr){
                            $.each(result,function(index,plan){
                                $(".commentList").append("<li class=\"item cl\"> <a href=\"#\"><i class=\"avatar size-L radius\"><img alt=\"\" src=\"\"></i></a>\n" +
										"\t\t\t\t\t\t\t\t    <div class=\"comment-main\">\n" +
										"\t\t\t\t\t\t\t\t      <header class=\"comment-header\">\n" +
										"\t\t\t\t\t\t\t\t        <div class=\"comment-meta\"><a class=\"comment-author planTitle\" href=\"#\">"+plan.planTitle	+"</a>\n" +
										"\t\t\t\t\t\t\t\t          <time class=\"createTime\">"+plan.createTime+"</time>\n" +
										"\t\t\t\t\t\t\t\t        </div>\n" +
										"\t\t\t\t\t\t\t\t      </header>\n" +
										"\t\t\t\t\t\t\t\t      <div class=\"comment-body\">\n" +
										"\t\t\t\t\t\t\t\t        <p><a href=\"#\" class=\"planContent\"></a> "+plan.planContent+"</p>\n" +
										"\t\t\t\t\t\t\t\t      </div>\n" +
										"\t\t\t\t\t\t\t\t    </div>\n" +
										"\t\t\t\t\t\t\t\t  </li>")


                            });


                        },
                        error:function(xhr,status,error){
                            alert("异步请求失败!");
                        }
                    });


				})

			})


			// $(window).resize(function(){
			// 	myChart.resize();
			//
			// })

				function getWorkTimesByid (){
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/Clock/getWorkTimesByid",
						type:"GET",
						data:{accountId:accountId,
						},
						dataType:"json",
						success:function(result,status,xhr){
							//将获得的信息返回到数据库
							console.log(result);

						},
						error:function(xhr,status,error){
							alert("异步请求失败!");
						}
					});
				}


			//格式化日期

			function dateFormat(fmt, date) {
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(),        // 年
					"m+": (date.getMonth() + 1).toString(),     // 月
					"d+": date.getDate().toString(),            // 日
					"H+": date.getHours().toString(),           // 时
					"M+": date.getMinutes().toString(),         // 分
					"S+": date.getSeconds().toString()          // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					};
				};
				return fmt;
			}


			//字符串转成日期类型
			//格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd

			function StringToDate(DateStr){

				var converted = Date.parse(DateStr);
				var myDate = new Date(converted);
				if (isNaN(myDate)){
					//var delimCahar = DateStr.indexOf('/')!=-1?'/':'-';
					var arys= DateStr.split('-');
					myDate = new Date(arys[0],--arys[1],arys[2]);
				}
				return myDate;
			}

			//上班打卡
			function addWorkInfo(address,workStatus,workTimeMore) {
				$.ajax({
					async:true,
					url:"${pageContext.request.contextPath}/Clock/addWorkInfo",
					type:"post",
					data:{accountId:accountId,
						address:address,
						workStatus:workStatus,
						workTime:workTimeMore
					},
					dataType:"json",
					success:function(result,status,xhr){
						//将获得的信息返回到数据库
						alert("打卡成功!");

					},
					error:function(xhr,status,error){
						alert("异步请求失败!");
					}
				});
			}



		</script>
	</body>
</html>
